<template>
  <div>
    <h1>修改科技成果</h1>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="科技成果名称" prop="scientificName">
        <el-input v-model="formData.scientificName" placeholder="请输入科技成果名称" :maxlength="200" show-word-limit
          clearable prefix-icon='el-icon-arrow-right' :style="{width: '99%'}"></el-input>
      </el-form-item>
      <el-form-item label="申请人" prop="applicantName">
        <el-input v-model="formData.applicantName" placeholder="请输入申请人" :maxlength="200" show-word-limit
          clearable prefix-icon='el-icon-s-custom' :style="{width: '99%'}"></el-input>
      </el-form-item>
      <el-form-item label="发明人" prop="inventorName">
        <el-input v-model="formData.inventorName" placeholder="请输入发明人" :maxlength="200" show-word-limit
          clearable prefix-icon='el-icon-s-custom' :style="{width: '99%'}"></el-input>
      </el-form-item>
      <el-form-item label="代理人" prop="agentName">
        <el-input v-model="formData.agentName" placeholder="请输入代理人" :maxlength="200" show-word-limit clearable
          prefix-icon='el-icon-s-custom' :style="{width: '99%'}"></el-input>
      </el-form-item>
      <el-form-item label="IPC类型" prop="ipcType">
        <el-input v-model="formData.ipcType" placeholder="请输入IPC类型" :maxlength="200" show-word-limit clearable
          prefix-icon='el-icon-s-finance' :style="{width: '99%'}"></el-input>
      </el-form-item>
      <el-form-item label="摘要信息" prop="summaryInfo">
        <el-input v-model="formData.summaryInfo" type="textarea" placeholder="请输入摘要信息"
          :autosize="{minRows: 1, maxRows: 400}" :style="{width: '99%'}"></el-input>
      </el-form-item>
      
      <el-form-item label="摘要图片" prop="summaryPicture" >
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="summaryPictureAction"
          v-model="formData.summaryPicture"
          :headers="headers"
          :limit="5"
          :on-exceed="onPicExceed"
          :on-success="setPictures"
          :on-remove="removePicture"
          :multiple="true"
          list-type="picture"
          :file-list="pictures"
          :before-upload="summaryPictureBeforeUpload"
          >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item label="权利要求" prop="claim">
        <el-input v-model="formData.claim" type="textarea" placeholder="请输入权利要求"
          :autosize="{minRows: 1, maxRows: 400}" :style="{width: '99%'}"></el-input>
      </el-form-item>
      <el-form-item label="说明书" prop="specification">
        <el-input v-model="formData.specification" type="textarea" placeholder="请输入说明书"
          :autosize="{minRows: 1, maxRows: 400}" :style="{width: '99%'}"></el-input>
      </el-form-item>

      <el-form-item label="pdf全文上传" prop="pdfFile">
        <el-upload ref="pdfFile"
         v-model="formData.pdfFile"
        :action="pdfFileAction" 
        :headers="headers"
        :on-success="setPdfFile"
        :limit="1"
        :before-upload="pdfFileBeforeUpload"
        :on-remove="removePdf"
        :file-list="pdf"
        :on-exceed="onPdfExceed"
        accept=".pdf">
          <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传不超过 50MB 的.pdf文件</div>
        </el-upload>
      </el-form-item>


      <el-form-item size="large">
        <div>
          <el-button type="primary" @click="updateForm">修改</el-button>
          <el-button @click="resetForm">还原</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {  addScientificInfo ,updateScientificInfo,getScientificInfo } from "@/api/tcsp/scientificInfo";
import store from "@/store";
import listVue from '../../monitor/cache/list.vue';
import { getToken } from "@/utils/auth";
export default {
  name: "updateScInfo",
  components: {},
  props: [],
  data() {
    return {
      loading: true,
      oldObj: {},
      formData: {},
      pdf: [],
      pictures: [],
      rules: {
        scientificName: [{
          required: true,
          message: '请输入科技成果名称',
          trigger: 'blur'
        }],
        applicantName: [{
          required: true,
          message: '请输入申请人',
          trigger: 'blur'
        }],
        inventorName: [{
          required: true,
          message: '请输入发明人',
          trigger: 'blur'
        }],
        agentName: [{
          required: true,
          message: '请输入代理人',
          trigger: 'blur'
        }],
        ipcType: [{
          required: true,
          message: '请输入IPC类型',
          trigger: 'blur'
        }, {
          pattern: /^[A-HJ-NP-S][0-9]{1,2}[A-Z][0-9]{1,4}\/[0-9]{1,4}$/,
          message: 'IPC类型格式错误',
          trigger: 'blur'
        }],
        summaryInfo: [{
          required: true,
          message: '请输入摘要信息',
          trigger: 'blur'
        }],
        claim: [{
          required: true,
          message: '请输入权利要求',
          trigger: 'blur'
        }],
        specification: [{
          required: true,
          message: '请输入说明书',
          trigger: 'blur'
        }],
      },
      //文件上传需要单独领出来做
      summaryPictureAction: 'http://localhost:8080/minio/upload',
      pdfFileAction: 'http://localhost:8080/minio/upload',
      pdfFilefileList: [],
      summaryPicturefileList: [],
      headers: {
          Authorization: "Bearer " + getToken(),
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList(this.$route.query.scienId);
  },
  mounted() {},
  methods: {
    resetForm() {
      this.getList(this.$route.query.scienId);
    },
    getList(id) {
      this.loading = true;
      //更新操作，初始化列表
      getScientificInfo(id).then(response =>{
        this.formData = response.data;
        this.oldObj = response.data;
        this.pictures=[];
        this.pdf=[];
        response.data.summaryPicture.forEach(element => {
          this.pictures.push({name: element.name, url: element.url});
        })
        this.pdf.push({name: response.data.pdfUrl.name, url: response.data.pdfUrl.url});
        this.formData.pdfFile='';
        this.formData.summaryPicture=[];
      })
      this.loading = false
    },
    summaryPictureBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 20
      if (!isRightSize) {
        this.$message.error('文件大小超过 20MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    pdfFileBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 50
      if (!isRightSize) {
        this.$message.error('文件大小超过 50MB')
      }
      let isAccept = new RegExp('.pdf').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择.pdf类型的文件')
      }
    },
    requestUpload(file){   //覆盖默认上传行为
      
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    updateForm() {
      let patentNo = this.oldObj.patentNo;
      this.formData.patentNo=patentNo;
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          updateScientificInfo(this.formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              //修改成功重置表单，或者回退到上一个路由
            });
        }
      })
    },
    setPdfFile(res,file,fileList) {
      this.formData.pdfFile=file.name;
    },
    setPictures(res,file,fileList) {
      let arr = []
      fileList.forEach(element => {
        arr.push(element.name)
      });
      this.formData.summaryPicture=arr;
    },
    removePdf() {
      this.formData.pdfFile = '';
    },
    removePicture(file, fileList) {
      let arr = []
      fileList.forEach(element => {
        arr.push(element.name)
      });
      this.formData.summaryPicture=arr;
    },
    onPdfExceed() {
      this.$modal.msgWarning('pdf全文文件最多只能上传一个文件');
    },
    onPicExceed() {
      this.$modal.msgWarning('摘要图片最多只能上传五张');
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
